<template>
  <div>
    <!-- <ul class="dy-list">
      <li @click="change(index)" v-for="(item,index) in List" :key="index">
        <router-link :to="item.to">
          <img :src="dy_active==index?item.img1:item.imgs" />
          <p :style="{color:dy_active==index?'#fd5d0b':'#b9b9b9'}">{{item.title}}</p>
        </router-link>
      </li>
    </ul>-->
    <van-tabbar v-model="active" inactive-color="#b9b9b9" active-color="#fd5d0b">
      <van-tabbar-item icon="wap-home" to="/index">首页</van-tabbar-item>
      <van-tabbar-item icon="wap-nav" to="/course">课程</van-tabbar-item>
      <van-tabbar-item icon="balance-list" to="/record">约课记录</van-tabbar-item>
      <van-tabbar-item icon="label" to="/practice">练习</van-tabbar-item>
      <van-tabbar-item icon="manager" to="/my">我的</van-tabbar-item>
    </van-tabbar>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dy_active: 0,
      active: 0,
      List: [
        {
          imgs: require("@/assets/image/img_03.jpg"),
          img1: require("@/assets/image/img_01_06.jpg"),
          title: "首页",
          to: "/index"
        },
        {
          imgs: require("@/assets/image/img_01_08.jpg"),
          img1: require("@/assets/image/img_05.jpg"),
          title: "课程",
          to: "/course"
        },
        {
          imgs: require("@/assets/image/img_01_10.jpg"),
          img1: require("@/assets/image/img2_03.png"),
          title: "约课记录",
          to: "/record"
        },
        {
          imgs: require("@/assets/image/img_01_03.jpg"),
          img1: require("@/assets/image/img3_03.png"),
          title: "练习",
          to: "/practice"
        },
        {
          imgs: require("@/assets/image/img_01_13.jpg"),
          img1: require("@/assets/image/img3_03.png"),
          title: "我的",
          to: "/my"
        }
      ]
    };
  },
  components: {},
  methods: {
    // change(index) {
    //   console.log(index);
    //   this.dy_active = index;
    // }
  }
};
</script>
<style scoped>
.dy-list {
  position: fixed;
  background: #fff;
  border-top: 1px solid #ccc;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.dy-list > li {
  width: 20%;
  text-align: center;
}
.dy-list > li img {
  margin-top: 18px;
}
.dy-list > li p {
  font-size: 13px;
}
</style>
